<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i>
      <span class="cube-title">活动详情</span>
    </div>
    <div class="jx-detail">
      <div class="detail-item">
        <div class="item">
          <div class="title">基本信息</div>
          <div class="list">
            <span>活动名称：</span>
            <div class="right">
              <span>云途养护第二期活动</span>
            </div>
          </div>
          <div class="list">
            <span>引导logo：</span>
            <div class="right">
              <img class="logo" src="/static/img/u5291.png"/>
            </div>
          </div>
          <div class="list">
            <span>引导图：</span>
            <div class="right">
              <img class="pic" src="/static/img/u168.png"/> 
            </div>
          </div>
          <div class="list">
            <span>活动地区：</span>
            <div class="right">
              <span>
                安徽-合肥
                <el-button @click="editAdress" type="text" size="small">修改地区</el-button>
              </span>
            </div>
          </div>
          <div class="list">
            <span>商户组：</span>
            <div class="right">
              <span>
                KA大客户组
                <el-button @click="editCategory" type="text" size="small">修改</el-button>
              </span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">活动时间</div>
          <div class="list">
            <span>活动时间：</span>
            <div class="right">
              <span>2019-09021 18：21：00</span>至<br/>
              <span>2019-09021 18：21：00</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <el-tabs v-model="other.activeName" @tab-click="handleClick">
            <el-tab-pane label="活动产品" name="1" data-val="1">
              <div class="detail-item">
                <div class="item">
                  <div class="jx-table" style="padding: 0;">
                    <el-table :data="detail_product" border style="width: 100%" v-loading="boo.loading">
                      <el-table-column type="index" label="序列" width="60" align="center">
                      </el-table-column>
                      <el-table-column prop="item1" label="产品图片" width="150" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                          <img class="logo" :src="scope.row.item1"/>
                        </template>
                      </el-table-column>
                      <el-table-column prop="item2" label="产品名称" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item3" label="采购价格"  align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item4" label="活动份数" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item5" label="活动价格" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column label="操作" align="center" width="210">
                        <template slot-scope="scope">
                          <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="活动统计" name="2" data-val="2">
              <div class="list-content">
                <div class="list-data">
                  <span class="bg">累计UV</span>
                  <span>33702</span>
                </div>
                <div class="list-data">
                  <span class="bg">成交笔数</span>
                  <span>33702</span>
                </div>
                <div class="list-data">
                  <span class="bg">成交额</span>
                  <span>33702</span>
                </div>
                <div class="list-data">
                  <span class="bg">成交转化</span>
                  <span>6.5%</span>
                </div>
                <div class="list-data">
                  <span class="bg">参与人数</span>
                  <span>337</span>
                </div>
              </div>
              <div class="select-type">
                <div class="item">
                  <span>筛选</span>
                  <div class="right">
                    <span v-for="(item, index) in $getJsonValue('筛选')" :key="index" :class="params_list.status == item.val ? 'active' : ''" @click="selected(item)">{{item.label}}({{item.sum}})</span>
                  </div>
                </div>
                <div class="item table-item">
                  <div class="right">
                    <div class="item-inline">
                      <span>店铺名称</span>
                      <el-input class="tel-value" v-model="params_list.name" placeholder="请输入店铺名称"></el-input>
                    </div>
                    <div class="item-inline">
                      <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="detail-item">
                <div class="item">
                  <div class="jx-table" style="padding: 0;">
                    <el-table :data="detail" border style="width: 100%" v-loading="boo.loading">
                      <el-table-column type="index" label="序列" width="60" align="center">
                      </el-table-column>
                      <el-table-column prop="item2" label="店铺名称" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item3" label="报名商品"  align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item4" label="SKU" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item5" label="报名价格" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item6" label="成交数量" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item8" label="UV数量" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item7" label="成交转化" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                      <el-table-column prop="item9" label="累计成交额" align="center" :show-overflow-tooltip="true">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 修改地区 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="60%">
      <div slot="title" class="header-title">
        <span class="title-name">修改地区</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="110px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <!-- <div class="title">品牌详情</div> -->
              <el-form-item label="地址：" prop="address">
                <el-cascader
                  class="tel-value"
                  v-model="currentRow.address"
                  :options="options"
                  :props="props"
                  @change="handleChange">
                </el-cascader>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 修改商户组 -->
    <el-dialog  :visible.sync="boo.showDetail" class="jx-dialog" width="60%">
      <div slot="title" class="header-title">
        <span class="title-name">修改商户组</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="110px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="商户组：" prop="type">
                <el-select class="tel-value" v-model="currentRow.type" placeholder="请选择">
                  <el-option label="KA组" value="1"></el-option>
                  <el-option label="大客户组" value="2"></el-option>
                  <el-option label="框架协议组" value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDetail = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">保存</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  const address = [
    {value: '1',label: '北京', children: [{value: '1-1',label: '东城区'}]},
    {value: '2',label: '安徽', children: [{value: '2-1',label: '合肥'},{value: '2-1',label: '芜湖'}]},
  ]
	export default {
		data() {
			return {
        boo: {
          loading: false,
          id: this.$route.query.id,
          showDialog: false, // 修改地区
          showDetail: false, // 修改类目
          saveing: false,
        },
        other: {
          activeName: '1',
        },
        params_list: {
          status:'',
          name: '',
        },
        detail: [
          {item2: '云途养护官方旗舰店',item3: '[保养]洗车服务',item4: '312133334133331',item5: '20',item6: '122',item7: '3.7%',item8: '300',item9: '1908812'},
          {item2: '云途养护官方旗舰店',item3: '[保养]洗车服务',item4: '312133334133331',item5: '23',item6: '345',item7: '3.7%',item8: '300',item9: '1908812'}
        ],
        detail_product: [
          {item1: '/static/img/u5291.png',item2: '洗车服务',item3: '30',item4: '100',item5: '免费领取',},
          {item1: '/static/img/u5291.png',item2: '洗车服务',item3: '30',item4: '100',item5: '免费领取',}
        ],
        currentRow: {},
        props: {
          expandTrigger: 'click', 
          value: 'value',
          label: 'label',
        },
        options: address,
			}
		},
		mounted(){
      let _self = this
    },
		methods: {
      back(){
        history.go(-1)
      },
      editAdress(){
        let _self = this
        _self.boo.showDialog = true
      },
      editCategory(){
        let _self = this
        _self.boo.showDetail = true
      },
      submitRow(){

      },
      handleClick(tab, event) {
        let _self = this
        _self.params_list.status = tab.$el['dataset']['val'] || ''
        console.log(_self.params_list.status)
      },
      selected(item){
        let _self = this
        _self.params_list.status = item.val
        _self.getList()
      },
      search(){},
      deleteRow(){},
    }
	}

</script>
<style scoped lang="sass">
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
  .jx-detail .detail-item .item_4:nth-child(2) .list span
    width: 150px
    font-size: 13px
  /deep/ .el-tabs__nav-wrap::after
    height: 0
  .list-content
    padding-top: 20px
    .list-data
      display: inline-block
      margin-right: 20px
      height: 75px
      line-height: 75px
      margin-bottom: 20px
      &::before 
          content: ''
          display: block
          clear: both
      .bg  
        background: #e3f4ff
        border: 1px solid #e3f4ff
        font-size: 16px
        font-weight: 500
      span 
        float: left
        background: #fff
        border: 1px solid #e4e4e4
        display: inline-block
        padding: 0 20px
        text-align: center
        font-size: 23px
        font-weight: 600
        em 
          font-style: normal
          font-weight: 500
</style>
